<template>
	<div class="train-teacher-test maxW">
		<div class="train-test seeOp fr">
			<!-- <a href="###">下载试卷</a> -->
			<el-button type="primary" @click="submitTask()">提交任务</el-button>
		</div>
		<div class="crumbs-link">
			<router-link to="/train/index">培训列表</router-link>
			<router-link to="/train/manage/index"><i>></i>培训管理</router-link>
			<router-link :to="{path: '/train/teacher-detail', query: {trainid: train_id}}" v-if="$route.query.name"><i>></i>{{$route.query.name}}</router-link>
			<strong v-if="testList.name"><i>></i>{{testList.name}}</strong>
			<strong v-else><i>></i>试卷作答</strong>
		</div>

		<div class="train-teacher-test-content ">
			<div class="train-teacher-test-xx">
				<span>
					得分<i> -- </i>
				</span>
				<!-- <span>
					用时<em>--</em>
				</span> -->
			</div>

			<div class="train-teacher-test-title">
				<h3>{{testList.name}}</h3>
				<p v-if="testList.marks">满分{{testList.marks}}分</p>
			</div>

			<div class="train-teacher-test-cont">

				<el-form :model="ruleForm" ref="ruleForm" label-width="0" class="demo-ruleForm">

					<div class="train-teacher-test-radio" v-for="type in testList.question_type" :key="type.id" >
						<div class="train-teacher-test-subject">
							<i>{{type.cn_num}}. </i>
							<span>{{type.question_type}} </span>
							<em> ({{type.count}}题，共{{type.score}}分)</em>
						</div>

						<ul>
							<template  v-for="(item, index) in testList.question_list" v-if="parseInt(item.qt_id) === parseInt(type.id)">
								<li class="test-list" v-if="parseInt(item.qt_id) === 1">
									<el-form-item prop="resource">
										<template v-if="item.pattern === 1">
											<div class="test-list-title clear">
												<i>{{index + 1}}.</i>
												<div class="content_vb fl"  v-html="item.content"></div>
												<strong class="fl">（{{item.score}}分）</strong>
											</div>
										</template>
										<template v-if="item.pattern === 2">
											<div class="test-list-title clear">
												<i>{{index + 1}}.</i>
												<img :src="BASE_URL + item.content_path">
												<strong>（{{item.score}}分）</strong>
											</div>
										</template>

										<el-radio-group v-model="ruleForm.answer[index].answer[0]">
											<ul>
												<li class="test-list-option clear" v-for="(option,index) in item.option">
													<el-radio :label="option.name"></el-radio>
													<div class="" v-html="option.value"></div>
												</li>
											</ul>
										</el-radio-group>
									</el-form-item>
								</li>
								<!-- 多选题 -->
								<li class="test-list" v-else-if="parseInt(item.qt_id) === 2">
									<el-form-item prop="resource">
										<template v-if="item.pattern === 1">
											<div class="test-list-title clear">
												<i>{{index + 1}}.</i>
												<div class="content_vb fl"  v-html="item.content"></div>
												<strong class="fl">（{{item.score}}分）</strong>
											</div>
										</template>
										<template v-if="item.pattern === 2">
											<div class="test-list-title clear">
												<i>{{index + 1}}.</i>
												<img :src="BASE_URL + item.content_path">
												<strong>（{{item.score}}分）</strong>
											</div>
										</template>

										<ul>
											<li class="test-list-option clear" v-for="option in item.option">
												<el-checkbox  
												@change="selectAnswerChange($event,index , option.name)" 
												:label="option.name"></el-checkbox>
												<div class="" v-html="option.value"></div>
											</li>
										</ul>

									</el-form-item>
								</li>
								<!-- 填空题 -->
								<li class="test-list" v-else-if="parseInt(item.qt_id) === 3">
									<el-form-item prop="resource">
										<template v-if="item.pattern === 1">
											<div class="test-list-title clear">
												<i>{{index + 1}}.</i>
												<div class="content_vb fl"  v-html="item.content"></div>
												<strong class="fl">（{{item.score}}分）</strong>
											</div>
										</template>
										<template v-if="item.pattern === 2">
											<div class="test-list-title clear">
												<i>{{index + 1}}.</i>
												<img :src="BASE_URL + item.content_path">
												<strong>（{{item.score}}分）</strong>
											</div>
										</template>
										<el-form-item label-width="40px" label="答案" prop="completion" class="editorBox">
											<div>
												<el-input
												  type="textarea"
												  :rows="4" resize="none"
												  placeholder="请输入内容"
												  v-model="ruleForm.answer[index].answer[0]">
												</el-input>
											</div>
										</el-form-item>
									
									</el-form-item>
								</li>
								<!-- 不是选择题 -->
								<li class="test-list" v-else>
									<el-form-item prop="resource">
										<template v-if="item.pattern === 1">
											<div class="test-list-title clear">
												<i>{{index + 1}}.</i>
												<div class="content_vb fl"  v-html="item.content"></div>
												<strong class="fl">（{{item.score}}分）</strong>
											</div>
										</template>
										<template v-if="item.pattern === 2">
											<div class="test-list-title clear">
												<i>{{index + 1}}.</i>
												<img :src="BASE_URL + item.content_path">
												<strong>（{{item.score}}分）</strong>
											</div>
										</template>
										<el-form-item label="答案" label-width="60px" prop="completion" class="editorBox">
											<div>
												<vue-editor :id="'editor'+item.id"  
												:editorToolbar="customToolbar"
												v-model="ruleForm.answer[index].answer[0]" placeholder="请输入内容"></vue-editor>
											</div>
										</el-form-item>
									
									</el-form-item>
								</li>
							</template>
						</ul>
					</div>

				</el-form>
			</div>
		</div>

		<div class="dependent" v-if="placeholder">
			<i class="ipng image_state01"></i>
			<p>还没发现任何相关的内容哦~</p>
		</div>

		<el-dialog
			title="提交任务"
			:visible.sync="submitJob"
			width="640px"
			custom-class="submitJob"
			:close-on-click-modal="false">
			<div>
				<div class="submitJob_h clear">
					<span>完成情况</span>
					<div>
						<span>
							<i></i>
							表示完成
						</span>
						<span>
							<i></i>
							表示未完成
						</span>
					</div>
				</div>
				<div class="submitJob_c">
					<!-- <p>完成数</p> -->
					<div class="submitJob_cb" >
						<template v-for="(item, index) in completeNumber" v-if="item.answer[0] !== null">
							<el-button disabled>{{index+1}}</el-button>
						</template>
						<template v-else>
							<el-button >{{index+1}}</el-button>
						</template>
					</div>
				</div>
				<!--  -->
				<div class="submitJob_btn buttonCSS">
					<el-button type="primary" plain @click="submitJob=false">取消</el-button>
					<el-button type="primary" @click="submitForm()">提交任务</el-button>
				</div>
			</div>
		</el-dialog>

	</div>
</template>


<script>
	import { VueEditor } from "vue2-editor";

	export default {
		components: {
			VueEditor
		},
		data() {
			return {
				ruleForm: {
					type: [],
					answer: []
				},
				testList: {
					name: '', //标题
					time: '', //用时 
					score: '', //得分 
					question_list: [], //试题内容
					question_type: [], //试题题型
					marks: null, //满分
					list: []
				},
				content: "<h1>Html For Editor</h1>",
				customToolbar: [
					[{ list: "ordered" }, { list: "bullet" }],
					[{ color: [] }, { background: [] }],
					["clean"]
				],
				submitJob: false,
				completeNumber: [], //完成数
				placeholder: false,
				
				train_id: this.$route.query.trainid,
				train_little_id: this.$route.query.train_little_id,
				test_id: this.$route.query.test_id,
			};
		},
		created(){
			this.get_testList()
			this.get_testAnswer()
		},
		methods: {

			goback() {
				this.$router.back(-1);
			},
			getSortFun(order, sortBy) {
				var ordAlpah = (order == 'asc') ? '>' : '<';
				var sortFun = new Function('a', 'b', 'return a.' + sortBy + ordAlpah + 'b.' + sortBy + '?1:-1');
				return sortFun;
			},
			//试卷列表
			get_testList() {
			    //   this.ruleForm.sub_data = deep_clone(this.subAlbumData);
			    let success = res => {

			    	this.testList.name = res.data.name
			    	this.testList.question_list = res.data.question_list;
			    	this.testList.question_type = res.data.question_type;

			    	this.testList.question_list.sort(this.getSortFun('asc', 'qt_id'));
			    	
			    	this.testList.question_type.forEach(item=>{
			    		this.testList.marks += parseInt(item.score)
			    	})

			    	for (let i = 0; i < this.testList.question_list.length; i++) {
			    		this.ruleForm.answer.push({id:this.testList.question_list[i].id, answer: [null]})
			    	}

			    };
			    let params = {
			    	id: this.$route.query.test_id,
			    	userid: this.$g.user_id
			    }
			    let fail = data => {};
			    this.$ajax.get("api/test/test_detail", {
			    	params: params,
			    	func: { success: success, fail: fail }
			    });
			},
			//多选
			selectAnswerChange( selected  , index ,answer ){

				if( is_empty(this.ruleForm.answer[index].answer) ){
					this.ruleForm.answer[index].answer = [];
				}
				if( selected ){
					if( !this.ruleForm.answer[index].answer.includes( answer ) ){
						this.ruleForm.answer[index].answer.push( answer );
					}
				}else{
					if(this.ruleForm.answer[index].answer.includes( answer ) ){
						this.ruleForm.answer[index].answer.splice( this.ruleForm.answer[index].answer.indexOf(answer) , 1);
					}
				}
			},
			//提交任务
			submitTask(){
				this.completeNumber = this.ruleForm.answer
				this.submitJob = true
				console.info(this.ruleForm.answer)
			},
			//提交试卷
			submitForm() {
				this.$confirm('确认要提交试卷吗, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					customClass: 'confirm-them',
				}).then(() => {
					this.submitJob = false;
					let success = (res =>{
						this.$message.success(res.msg);

						setTimeout( () => {
							this.$router.push({
								// path: '/train/test-detail', query: {trainid: this.train_id, train_little_id: this.train_little_id, test_id:this.test_id}
								path: '/train/test-detail', query: {user_id: this.$g.user_id, test_id: this.test_id, train_id: this.train_id, train_little_id: this.train_little_id,show_flag: 1, name: this.$route.query.name}
							})
						}, 1000);
					})
					let params = {
						user_id: this.$g.user_id,
						train_id: this.train_id,
						train_little_id: this.train_little_id,
						test_id: this.test_id,
						answer: this.ruleForm.answer,
						save_flag:'1'
					}

					this.$ajax.post('api/test/save_answer_test_detail',params,{func: {success: success}});
				}).catch(() => {});

			},
			get_testAnswer(){
				let success = (res =>{
					this.testAnswer = res.data;
				})

				let fail = res => {};

				let params = {
					user_id: this.$g.user_id,
					train_id: this.train_id,
					train_little_id: this.train_little_id,
					test_id: this.test_id
				};

				this.$ajax.post('api/test/test_answer',params,{func: {success: success}});
			},
		}
	};
</script>